<template>
<div class='icons'>
    <swiper :options="swiperOption">
        <swiper-slide  v-for='(page,index) of pages' :key='index'>
                
                    <div class='icon' v-for='item of page' :key='item.id'>
                        <div class='icon-img'>
                            <img class='img-count' :src='item.imgUrl'>
                        </div>
                        <p class='icon-text'>{{item.desc}}</p>
                    </div>
                
    </swiper-slide>
    </swiper>
</div>
</template>

<script>
export default{
    name:'HomeIcons',
    props:{
        list:Array
    },
    data:function(){
        return {
            swiperOption:{autoplay:false}
        }
    },
    computed: {
    pages () {
      const pages = []
      this.list.forEach((item, index) => {
        const page = Math.floor(index / 8)
        if (!pages[page]) {
          pages[page] = []
        }
        pages[page].push(item)
      })
      return pages
    }
  }
}
</script>

<style lang='stylus' scoped>
.icons
    overflow :hidden
    width:100%
    height :0
    padding-bottom :50%
    
    .icon
        float:left
        position: relative
        width:25%
        padding-bottom: 25%
        height:0
        display:flex
        align-items:center
        justify-content:center
        
        .icon-img
            position: absolute
            top:0
            bottom: .3rem
            box-sizing: border-box
            padding: .1rem
            
            .img-count
                display: block
                height: 100%
        .icon-text
            position: absolute
            bottom: 0
            
                      
</style>
